<template>
  <div class="waller-index-con">
    <div class="group-sel" style="background-color: white; padding-top: 5px">
      <a-space style="margin-left: 5px">
        <div>账户组合：</div>
        <a-select v-model="groupId" style="width: 300px" @change="initAccount">
          <a-option v-for="(item, index) of groupList" :key="index" :label="item.groupName" :value="item.groupId" />
        </a-select>
      </a-space>
    </div>
    <div class="top">
      <div @click="changeTab('1')" :class="['consumption-account', currentTab == '1' ? 'active' : '']">
        <div class="flex-c-sb">
          <div>消费账户</div>
          <div style="font-size: 12px">ID:{{ $extract(accountInfo, 'consumeWalletAccount.code') }}</div>
        </div>
        <div class="flex-c-sb" style="height: 50px">
          <div>
            <div style="font-size: 12px; margin-top: 5px; color: #918d8d">
              <span>归属：</span>
              <span>{{ $extract(accountInfo, 'giftWalletAccount.userName') }}</span>
            </div>
            <div class="gloable-color"> {{ `余额：￥${getConsumeWalletAccountBalance()} ${$extract(accountInfo, 'giftWalletAccount.availabeBalance') ? '(含赠送)' : ''}` }} </div>
            <div class="gloable-color"> {{ `赠送：￥${$extract(accountInfo, 'giftWalletAccount.availabeBalance')}` }} </div>
          </div>
          <div v-if="currentTab == '1'">
            <a-tag class="tag-style cursor" color="arcoblue" size="small" bordered @click="showRechargeModal = true">充值</a-tag>
            <!-- <a-tag class="tag-style cursor" color="arcoblue" size="small" bordered @click="showTransferAccountsModal = true" v-if="getConsumeWalletAccountBalance() > 0">转账</a-tag> -->
          </div>
        </div>
      </div>
      <div @click="changeTab('2')" :class="['withdrawal-account', 'ml10', currentTab == '2' ? 'active' : '']">
        <div class="flex-c-sb">
          <div>提现账户</div>
          <div style="font-size: 12px">ID:{{ $extract(accountInfo, 'withdrawWalletAccount.code') }}</div>
        </div>
        <div class="flex-c-sb">
          <div>
            <div style="font-size: 12px; color: #918d8d">
              <span>归属：</span>
              <span>{{ $extract(accountInfo, 'withdrawWalletAccount.userName') }}</span>
            </div>
            <div class="gloable-color"> {{ `余额：￥${$extract(accountInfo, 'withdrawWalletAccount.availabeBalance') ? $extract(accountInfo, 'withdrawWalletAccount.availabeBalance') : '0'}` }} </div>
            <div class="gloable-color"> {{ `冻结：￥${$extract(accountInfo, 'withdrawWalletAccount.freezeBalance') ? $extract(accountInfo, 'withdrawWalletAccount.freezeBalance') : '0'}` }} </div>
          </div>
          <div v-if="currentTab == '2'">
            <a-tag class="tag-style cursor" color="arcoblue" size="small" bordered @click="showWithdrawDepositModal = true">去提现</a-tag>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <component ref="accountCom" v-if="accountInfoLoading" :is="currentTab == '1' ? consumptionAccount : withdrawalAccount" :accountInfo="accountInfo" />
    </div>
  </div>
  <Recharge v-if="showRechargeModal" v-model="showRechargeModal" :accountInfo="accountInfo" />
  <TransferAccounts v-if="showTransferAccountsModal" v-model="showTransferAccountsModal" :accountInfo="accountInfo" @save="initAccount()" />
  <WithdrawDeposit v-if="showWithdrawDepositModal" v-model="showWithdrawDepositModal" :initAccount="initAccount" :accountInfo="accountInfo" />
</template>

<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue'
  import { findCompanyWallet, listWalletAccountGroup } from '@/api/finance/wallet'
  import consumptionAccount from './components/consumptionAccount.vue'
  import withdrawalAccount from './components/withdrawalAccount.vue'
  import Recharge from './components/recharge.vue'
  import TransferAccounts from './components/transferAccounts.vue'
  import WithdrawDeposit from './components/withdrawDeposit.vue'
  import useUserStore from '@/store/modules/user'

  const userInfo = useUserStore()
  let currentTab = ref('1')
  let groupId = ref('')
  let accountCom = ref()
  let groupList: any = ref([])
  let showTransferAccountsModal = ref(false)
  let showRechargeModal = ref(false)
  let showWithdrawDepositModal = ref(false)
  let accountInfoLoading = ref(false)
  let accountInfo: any = ref({})

  const initAccount = async () => {
    const res: any = await findCompanyWallet({ companyId: userInfo.companyId, groupId: groupId.value })
    accountInfoLoading.value = true
    accountInfo.value = res?.data || {}
    nextTick(() => {
      accountCom.value.refreshList()
    })
  }
  // 获取消费账户余额
  const getConsumeWalletAccountBalance = () => {
    let consumeWalletAccountBalance = accountInfo.value?.consumeWalletAccount?.availabeBalance || 0
    let giftWalletAccountBalance = accountInfo.value?.giftWalletAccount?.availabeBalance || 0
    return consumeWalletAccountBalance + giftWalletAccountBalance
  }

  const changeTab = (val: string) => {
    currentTab.value = val
    initAccount()
  }

  const getGroup = async () => {
    const res: any = await listWalletAccountGroup()
    groupList.value = res?.data || []
    groupId.value = groupList.value[0]?.groupId || ''
    initAccount()
  }

  getGroup()
</script>

<style lang="less" scoped>
  .waller-index-con {
    height: calc(100vh - @headerHeight - @tabviewHeight);

    .top {
      display: flex;
      border-bottom: 1px solid #d7d7d7;
      position: relative;
      background: white;
      padding: 10px 10px 0 10px;
      height: 100px;
      .active {
        background-color: white !important;
        // margin-bottom: -1px;
        position: absolute;
        bottom: -1px;
        height: 91px !important;
      }

      .consumption-account,
      .withdrawal-account {
        width: 260px;
        height: 90px;
        // background-color: hotpink;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border: 1px solid #d7d7d7;
        border-bottom: none;
        padding: 5px;
        background-color: #f7f8fa;
        .gloable-color {
          color: red;
          font-size: 12px;
          margin-top: 2px;
        }

        .tag-style {
          border-radius: 10px;
          display: block;
          margin-top: 5px;
        }
      }
      .withdrawal-account {
        margin-left: 270px;
      }
    }

    .bottom {
      height: calc(100vh - @menuHeight - 137px);
      // margin-top: 10px;
    }
  }
</style>
